<div nz-row nzType="flex" nzAlign="middle" class="cil__detail-header">
  <div nz-col [nzSpan]="ifEdit ? 18 : 24" class="cil__left-block">
    <div nz-row nzType="flex" nzAlign="middle">
      <div nz-col nzSpan="1" class="cil__banner"></div>

      <div nz-col class="cil__title">{{title}}</div>

      <div *ngIf="ifEditable" [className]="'cil__icon ' + (hideIcon ? 'hide ' : '')" nz-col nzSpan="1">
        <img *ngIf="!ifEdit" (click)="showButtons()" class="cil__edit" src="./assets/images/centaur/edit-blue.png" />
        <img *ngIf="ifEdit" class="cil__edit" src="./assets/images/centaur/edit-white.png" />
      </div>

      <div nz-col nzOffset="2" nzSpan="16">
        <div class="scrollBar" *ngIf="tabs && tabs.length > 0">
          <button nz-button class="carousel-btn-left" (click)="scrollTo('left')">
            <i nz-icon [nzIconfont]="'icon-caret-left'"></i>
          </button>
          <nz-radio-group [(ngModel)]="selectTab" class="cil__radio-group" #tabScroll>
            <label nz-radio-button *ngFor="let item of tabs" [nzValue]="item.url" (click)="changeRouter(item.url)">
              {{item.text}}
            </label>
          </nz-radio-group>
          <button nz-button class="carousel-btn-right" (click)="scrollTo('right')">
            <i nz-icon [nzIconfont]="'icon-caret-right'"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="ifEdit" nz-col [nzSm]="btnsNzSm" [nzMd]="btnsNzMd" [nzLg]="btnsNzLg">
    <div nz-row nzType="flex" nzJustify="end">
      <button nz-button (click)="handleBack()">
        <img class="cil-edit" src="./assets/images/centaur/back.png" />
        {{'BTN.CANCEL' | i18n}}
      </button>
      <button nz-button (click)="handleSave()">
        <img class="cil-edit" src="./assets/images/centaur/save.png" />
        {{'BTN.SAVE' | i18n}}
      </button>
    </div>
  </div>
</div>
